<script setup lang="ts">
import { ref, computed, onMounted } from '@vue/runtime-core'
import { ElMessage, ElNotification } from 'element-plus'
import { 
  Document, DataLine, Coin, Warning, SuccessFilled, 
  InfoFilled, Refresh, Download, Calendar, Collection 
} from '@element-plus/icons-vue'

// 数据接口定义
interface ReportData {
  period: string
  totalTransactions: number
  matchedTransactions: number
  unmatchedTransactions: number
  accuracyRate: number
  totalAmount: number
  matchedAmount: number
  unmatchedAmount: number
}

interface ChartData {
  date: string
  transactions: number
  matched: number
  unmatched: number
  accuracy: number
}

interface Anomaly {
  id: number
  type: 'highAmount' | 'duplicate' | 'pattern'
  description: string
  severity: 'high' | 'medium' | 'low'
  amount: number
  date: string
}

interface Suggestion {
  id: number
  title: string
  type: 'success' | 'warning' | 'info'
  description: string
}

// 响应式数据
const loading = ref(false)
const dateRange = ref<string[]>([])
const reportData = ref<ReportData>({
  period: '',
  totalTransactions: 0,
  matchedTransactions: 0,
  unmatchedTransactions: 0,
  accuracyRate: 0,
  totalAmount: 0,
  matchedAmount: 0,
  unmatchedAmount: 0
})
const chartData = ref<ChartData[]>([])
const anomalies = ref<Anomaly[]>([])
const suggestions = ref<Suggestion[]>([])
const lastUpdate = ref('')
const chartPeriod = ref(30)

// 计算属性
const chartPeriodText = computed(() => {
  const periods: Record<number, string> = {
    7: '近7天',
    30: '近30天',
    90: '近90天'
  }
  return periods[chartPeriod.value] || '近30天'
})

const accuracyRateColor = computed(() => {
  const rate = reportData.value.accuracyRate
  if (rate >= 95) return '#52c41a'
  if (rate >= 90) return '#fa8c16'
  return '#ff4d4f'
})

// 方法
const generateReport = async () => {
  loading.value = true
  try {
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 1500))
    
    // 更新报告数据
    reportData.value = {
      period: `${dateRange.value[0]} 至 ${dateRange.value[1]}`,
      totalTransactions: 1247,
      matchedTransactions: 1185,
      unmatchedTransactions: 62,
      accuracyRate: 95.0,
      totalAmount: 2856700,
      matchedAmount: 2723900,
      unmatchedAmount: 132800
    }
    
    // 更新图表数据
    chartData.value = [
      { date: '2023-01-01', transactions: 45, matched: 42, unmatched: 3, accuracy: 93.3 },
      { date: '2023-01-02', transactions: 38, matched: 36, unmatched: 2, accuracy: 94.7 },
      { date: '2023-01-03', transactions: 52, matched: 49, unmatched: 3, accuracy: 94.2 },
      { date: '2023-01-04', transactions: 41, matched: 39, unmatched: 2, accuracy: 95.1 },
      { date: '2023-01-05', transactions: 47, matched: 45, unmatched: 2, accuracy: 95.7 },
      { date: '2023-01-06', transactions: 39, matched: 37, unmatched: 2, accuracy: 94.9 },
      { date: '2023-01-07', transactions: 55, matched: 52, unmatched: 3, accuracy: 94.5 }
    ]
    
    // 更新异常数据
    anomalies.value = [
      {
        id: 1,
        type: 'highAmount',
        description: '大额交易异常：订单#20230105001金额为¥85,000.00',
        severity: 'high',
        amount: 85000,
        date: '2023-01-05'
      },
      {
        id: 2,
        type: 'duplicate',
        description: '重复交易：银行流水#BANK20230103001与#BANK20230103002疑似重复',
        severity: 'medium',
        amount: 12500,
        date: '2023-01-03'
      },
      {
        id: 3,
        type: 'pattern',
        description: '匹配模式异常：客户"ABC公司"的3笔订单匹配度均在75-80%之间',
        severity: 'low',
        amount: 28600,
        date: '2023-01-04'
      }
    ]
    
    // 更新建议数据
    suggestions.value = [
      {
        id: 1,
        title: '匹配优化',
        type: 'success',
        description: '系统检测到您经常手动确认相似度为75-80%的匹配，已自动调整算法参数'
      },
      {
        id: 2,
        title: '数据质量',
        type: 'info',
        description: '最近导入的银行流水中有5%的数据格式不规范，建议检查数据源'
      }
    ]
    
    // 更新时间
    lastUpdate.value = new Date().toLocaleString('zh-CN')
    
    ElNotification({
      title: '报告生成完成',
      message: '智能对账报告已生成完成',
      type: 'success'
    })
  } catch (error) {
    ElMessage.error('报告生成失败: ' + (error as Error).message)
  } finally {
    loading.value = false
  }
}

const exportReport = () => {
  // 模拟导出报告
  ElMessage.success('报告导出成功!')
}

const handleChartPeriodChange = (period: number) => {
  chartPeriod.value = period
  ElMessage.info(`切换到${chartPeriodText.value}视图`)
}

const handleViewAnomaly = (anomaly: Anomaly) => {
  ElMessage.info(`查看异常详情: ${anomaly.description}`)
}

const getProgressColor = (percentage: number) => {
  if (percentage >= 90) return '#52c41a'
  if (percentage >= 70) return '#fa8c16'
  return '#ff4d4f'
}

// 组件挂载时加载数据
onMounted(() => {
  // 设置默认日期范围为最近30天
  const endDate = new Date()
  const startDate = new Date()
  startDate.setDate(startDate.getDate() - 30)
  
  dateRange.value = [
    startDate.toISOString().split('T')[0],
    endDate.toISOString().split('T')[0]
  ]
  
  // 加载初始数据
  generateReport()
})
</script>